<template>
	<view class="alipay-container">
		<!-- 加载状态 -->
		<view class="loading" v-if="isLoading">
			<view class="loading-icon">⟳</view>
			<view class="loading-text">正在跳转到支付宝支付...</view>
		</view>

		<!-- 错误提示 -->
		<view class="error" v-if="showError">
			<view class="error-icon">⚠️</view>
			<view class="error-message">{{ errorMsg }}</view>
			<view class="retry-btn" @click="retry">重新发起支付</view>
		</view>

		<!-- 核心：用web-view渲染支付宝表单 -->
		<web-view :src="htmlSrc" v-if="htmlSrc"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLoading: true, // 加载状态
				showError: false, // 错误状态
				errorMsg: '', // 错误信息
				htmlSrc: '' // 支付宝表单的base64地址
			};
		},
		onLoad() {
			// 1. 从本地存储获取payHtml
			const payHtml = uni.getStorageSync('alipayHtml');

			if (!payHtml) {
				// 无表单数据时显示错误
				this.isLoading = false;
				this.showError = true;
				this.errorMsg = '支付信息获取失败，请重新尝试';
				return;
			}

			// 2. 将HTML转为base64格式（避免特殊字符解析问题）
			try {
				// 编码为base64，确保HTML能被web-view正确解析
				this.htmlSrc = 'data:text/html;base64,' + btoa(unescape(encodeURIComponent(payHtml)));
				this.isLoading = false; // 隐藏加载状态
			} catch (err) {
				// 编码失败时处理
				this.isLoading = false;
				this.showError = true;
				this.errorMsg = '支付表单解析失败';
				console.error('HTML编码失败：', err);
			}
		},
		onUnload() {
			// 页面关闭时清除本地存储的表单，避免残留
			uni.removeStorageSync('alipayHtml');
		},
		methods: {
			// 重新发起支付（返回上一页）
			retry() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	};
</script>

<style scoped>
	.alipay-container {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #f5f5f5;
	}

	/* 加载样式 */
	.loading {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fff;
	}

	.loading-icon {
		font-size: 40px;
		color: #1677ff;
		margin-bottom: 16px;
		animation: rotate 1.5s linear infinite;
	}

	.loading-text {
		font-size: 16px;
		color: #666;
	}

	/* 错误样式 */
	.error {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		padding: 0 20px;
		text-align: center;
	}

	.error-icon {
		font-size: 50px;
		color: #ff4d4f;
		margin-bottom: 20px;
	}

	.error-message {
		font-size: 16px;
		color: #333;
		margin-bottom: 30px;
		line-height: 1.5;
	}

	.retry-btn {
		background-color: #1677ff;
		color: #fff;
		padding: 10px 30px;
		border-radius: 20px;
		font-size: 16px;
	}

	/* 旋转动画 */
	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}
</style>